<template>
  <!--账户转账记录-->
  <SectionContainer class="u-p20">
    <SectionTitle>账户转账记录</SectionTitle>

    <!-- 表格 -->
    <TableFull
      :data="tableData"
      :total="tableTotal"
      :current-page="page.pageNo"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
      <el-form
        class="m-filter"
        inline
        slot="handle"
      >
        <el-form-item>
          <el-date-picker
            :clearable="false"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="u-w300"
            value-format="yyyy-MM-dd"
            :picker-options="DATERANGE_OPTIONS"
            v-model="filter.daterange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            size="small"
            filterable
            placeholder="请选择账户名称/登录账号"
            v-model="filter.account"
          >
            <el-option
              v-for="(item, index) in accountOptions"
              :key="index"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            size="small"
            filterable
            placeholder="请选择公司名称"
            v-model="filter.company"
          >
            <el-option
              v-for="(item, index) in companyOptions"
              :key="index"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            size="small"
            placeholder="请选择交易类型"
            v-model="filter.transactionTypeIds"
          >
            <el-option
              v-for="item in PAY_TYPE.filter(item => item.value !== 3)"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="search"
          >查询</el-button>
        </el-form-item>
      </el-form>
      <template slot="column">
        <el-table-column
          :resizable="false"
          align="center"
          v-for="(item, index) in tableColumn"
          :key="index"
          :prop="item.prop"
          :width="item.width"
          :label="item.label"
        >
          <template slot-scope="scope">
            <!-- 交易时间 -->
            <template v-if="item.prop === 'createTime'"><span v-html="formatMultiLineTime(scope.row[item.prop])"></span></template>
            <!-- 交易类型 -->
            <template v-else-if="item.prop === 'transactionTypeId'">{{mapValue(PAY_TYPE, scope.row.transactionTypeId)}}</template>
            <!-- 备注 -->
            <template v-else-if="item.prop === 'remarks'">
              <span
                class="u-prewrap"
                v-html="getTableRemarks(scope.row)"
              ></span>
            </template>
            <!-- 其他 -->
            <template v-else>{{scope.row[item.prop]}}</template>
          </template>
        </el-table-column>
      </template>
    </TableFull>
  </SectionContainer>
</template>

<script>
import Moment from "moment";

import SectionContainer from "@/components/section-container";
import SectionTitle from "@/components/section-title";
import TableFull from "@/components/table-full";

import { PAY_TYPE } from "@/assets/js/common-option";
import DATERANGE_OPTIONS from "@/assets/js/daterange-option";
import {
  sessionStorage,
  splitAccount,
  mapValue,
  formatMultiLineTime
} from "@/utils";
import { fetchFinancialSelect, fetchFinancialTransferDetailList } from "@/api";
import permissionMixin from "@/mixins/permission";

export default {
  mixins: [permissionMixin],
  components: {
    SectionContainer,
    SectionTitle,
    TableFull
  },
  data() {
    return {
      PAY_TYPE,

      user: sessionStorage.get("USER"),
      DATERANGE_OPTIONS,

      // 下拉选项
      accountOptions: [],
      companyOptions: [],

      filter: {
        daterange: [
          Moment()
            .subtract(3, "months")
            .format("YYYY-MM-DD"),
          Moment().format("YYYY-MM-DD")
        ],
        account: "全部账户",
        company: "全部公司",
        transactionTypeIds: 0
      },

      page: {
        pageNo: 1,
        pageSize: 50
      },

      // 表格
      tableColumn: [
        {
          label: "交易时间",
          prop: "createTime"
        },
        {
          label: "账户名称",
          prop: "accountName"
        },
        {
          label: "登录账号",
          prop: "LoginName"
        },
        {
          label: "公司名称",
          prop: "company"
        },
        {
          label: "交易类型",
          prop: "transactionTypeId"
        },
        {
          label: "交易金额(元)",
          prop: "transactionAmount"
        },
        // {
        //   label: "交易后余额(元)",
        //   prop: "amount"
        // },
        {
          label: "备注",
          prop: "remarks"
        },
        {
          label: "操作人",
          prop: "createBy"
        }
      ],
      tableData: [],
      tableTotal: 0
    };
  },
  methods: {
    mapValue,
    formatMultiLineTime,

    // 下拉：账号、名称、公司
    fetchFinancialSelect() {
      fetchFinancialSelect().then(res => {
        this.accountOptions = [
          {
            name: "全部账户"
          }
        ].concat(res.data.account);
        this.companyOptions = [
          {
            name: "全部公司"
          }
        ].concat(res.data.company);
      });
    },
    search() {
      this.page.pageNo = 1;
      this.getTable();
    },
    // 获取表格数据
    getTable() {
      let company =
        this.filter.company === "全部公司" ? "" : this.filter.company;
      let loginName =
        this.filter.account === "全部账户"
          ? ""
          : splitAccount(this.filter.account).email;
      this.tableData = [];
      this.tableTotal = 0;
      fetchFinancialTransferDetailList({
        body: {
          ...this.page,
          company,
          loginName,
          transactionTypeIds: this.filter.transactionTypeIds,
          userId: this.user.userId,
          startTime: this.filter.daterange[0],
          endTime: this.filter.daterange[1]
        }
      }).then(res => {
        this.tableData = res.data.list || [];
        this.tableTotal = res.data.count;
      });
    },
    // 计算备注
    getTableRemarks({ transferNote, rebates, remarks }) {
      let ret = [];
      if (transferNote) {
        ret.push(`${transferNote}；`);
      }
      if (rebates !== null) {
        ret.push(`返点${rebates}%；`);
      }
      if (remarks) {
        ret.push(`${remarks}；`);
      }
      return ret.join("\n");
    },
    // 分页
    currentChange(val) {
      this.page.pageNo = val;
      this.getTable();
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.getTable();
    }
  },
  created() {
    this.fetchFinancialSelect();
    this.getTable();
  }
};
</script>